import React from 'react';
import {Spin, Card, Button, Row, Col, Table, Form, Divider, Checkbox, Collapse, Alert, Modal, message as msg, Anchor, Popover} from 'antd';
import PropTypes from 'prop-types';
import routes from './routes';
import {FORM_OPTIONS, TABLE, DATE_FORMAT, FORM_ROW_OPTIONS, DATETIME_FORMAT, FILES_API} from '../constants';
import {PERMISSION, PANEL_CARD_COL_SPAN, subClaimApplyStatusSale} from './constants';
import {getDetail, getWarrantyPolicy, getSubClaimHistoriesList, getPartServicePrices} from './api';
import {injectIntl, language} from './intl';
import {formatAmount, conventEnumValueToString, formatDateTime} from '../utils';
import TextInput from 'Shared/components/TextInput';
import styles from './style.css';
import Return from '../common/Return';
import {approveValidator, adjustValidator} from './validator';
import {currency, repairType, claimUsedPartDealCategory, claimAthType, customerType, faultType, fileType, subClaimApplyStatus} from '../Enum';
import {hasPermissions} from './utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import ClaimHistoryPanel from './PageAdd/ClaimHistoryPanel';
import WrappedDatePicker from '../common/WrappedDatePicker';
import WrappedSelect from '../common/WrappedSelect';
import ImageUpload from './PageAdd/ImageUpload';
const {Link} = Anchor;
const url = '/#/dcs/afterSales/claimApply/';
const FormItem = Form.Item;
const {Panel} = Collapse;
const {confirm} = Modal;
const {Description} = DescriptionList;
const subClaimApplyStatusSaleList = subClaimApplyStatusSale.toList(language);
class ApprovePanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        data: {
            isOut: false,
            outFee: 0
        },
        showPartMultiSelectPanel: false,
        details: [],
        claimWorkItemDetails: [],
        claimApprovedHis: [],
        isAccessory: false,
        //缓存选择的备件
        accessoryDetails: [],
        claimAthDetails: [],
        claimMaterialDetails: [],
        claimHistories: {},
        //政策校验
        warrantyPolicyMessage: ''
    }
    componentDidMount() {
        if(this.props.id) {
            this.setState({loading: true});
            getDetail(this.props.id)
                .then(res => {
                    if(res.ok) {
                        this.setState({
                            loading: false,
                            data: res.data,
                            details: res.data.details,
                            claimWorkItemDetails: res.data.claimWorkItemDetails,
                            claimApprovedHis: res.data.claimApprovedHis,
                            claimAthDetails: res.data.claimAthDetails,
                            claimMaterialDetails: res.data.claimMaterialDetails
                        });
                        this.getClaimHistories(res.data.vin, res.data.createTime);
                        // this.getWarrantyPolicy(res.data, res.data.details, res.data.claimMaterialDetails);
                    } else
                        this.setState(({
                            loading: false
                        }));
                });
        }
        window.scrollTo(0, 0);
    }
    componentWillUnmount() {
        this.isunmount = true;
    }
    getClaimHistories = (vin, createTime) => {
        this.setState({
            loading: true
        });
        getSubClaimHistoriesList({
            vin,
            createTime
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        claimHistories: res.data
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    getWarrantyPolicy = (data, claimMaterialDetails, details) => {
        this.setState({
            loading: true
        });
        const parts = [];
        claimMaterialDetails.map(v => parts.push(v.usedPartId));
        details.map(v => parts.push(v.usedPartId));
        getWarrantyPolicy({
            vehicleSoldId: data.vehicleSoldId,
            repairType: data.repairType,
            repairDate: data.checkDate,
            mileage: data.mileage,
            usedPartId: data.causePartId,
            brandId: data.brandId,
            subDealerId: data.subDealerId,
            claimApplyId: data.claimApplyId,
            dealerId: data.dealerId,
            id: data.id,
            parts
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        warrantyPolicyMessage: res.data.content
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    onChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onClickOkOnPopconfirm = () => {
        this.props.onCancel();
    }
    onSubmitPass = () => {
        const {data} = this.state;
        const subThis = this;
        confirm({
            title: this.props.intl.formatMessage({
                id: 'approvePanel.message.claimObject',
                defaultMessage: '请选择索赔对象'
            }),
            cancelText: this.props.intl.formatMessage({
                id: 'approvePanel.message.kd',
                defaultMessage: 'KD工厂'
            }),
            okText: this.props.intl.formatMessage({
                id: 'approvePanel.message.chery',
                defaultMessage: 'CHERY'
            }),
            onOk() {
                subThis.onPassApproveAndClaim();
            },
            onCancel() {
                subThis.onPass(data);
            },
        });
    }
    onPassApproveAndClaim = () => {
        const {claimMaterialDetails, data} = this.state;
        const claimMaterialDetail = claimMaterialDetails.find(v => v.isCaused === true);
        if(claimMaterialDetail.isLocal)
            return msg.warn(this.props.intl.formatMessage({
                id: 'newPanel.message.err1',
                defaultMessage: '主损件'
            }) + claimMaterialDetail.usedPartCode + this.props.intl.formatMessage({
                id: 'newPanel.message.err2',
                defaultMessage: '为地产件不允许提报给CHERY'
            }));
        this.setState({loading: true});
        this.props.onApproveAndClaimApply(data).then(res => {
            if(res.ok) {
                window.open(`${url}${res.data}/update`);
                this.props.successReturn();
            }
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onPass = data => {
        this.setState({loading: true});
        this.props.onSubmitPass(data).then(res => {
            if(res.success)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onSubmitReject = () => {
        const {data} = this.state;
        const isValid = approveValidator(data);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        this.setState({loading: true});
        this.props.onSubmitReject(data).then(res => {
            if(res.success)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onSubmitRefuse = () => {
        const {data} = this.state;
        const isValid = approveValidator(data);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        this.setState({loading: true});
        this.props.onSubmitRefuse(data).then(res => {
            if(res.success)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onClickStopPropagation = e => {
        e.stopPropagation();
    }
    
    onChangeCheckDate = (value, name) => {
        const {data, details, claimMaterialDetails} = this.state;
        if(data.checkDate && data.wholesaleDealerId && data.brandId && (claimMaterialDetails.length > 0 || details.length > 0)) {
            this.setState({
                loading: true
            });
            getPartServicePrices({
                repairDate: data.checkDate,
                brandId: data.brandId,
                dealerId: data.wholesaleDealerId,
                parts: claimMaterialDetails.map(v => v.usedPartId),
                productCategoryCode: data.ProductCategoryCode,
                accessories: details.map(v => v.usedPartId)
            })
                .then(res => {
                    if(res.ok)
                        this.setState({
                            data: Object.assign({}, this.state.data, {
                                [name]: value
                            }),
                            claimMaterialDetails: claimMaterialDetails.map(item => {
                                const partServicePrice = res.data.partPrices.find(v => v.partId === item.usedPartId);
                                if(partServicePrice)
                                    return Object.assign({}, item, {
                                        price: partServicePrice.price * partServicePrice.priceRate,
                                        mgmtFee: item.mgmtRate ? item.quantity * partServicePrice.price * item.mgmtRate * partServicePrice.priceRate : 0,
                                        materialFee: item.quantity * partServicePrice.price * partServicePrice.priceRate,
                                        totalFee: (item.quantity * partServicePrice.price * partServicePrice.priceRate) +
                                            (item.mgmtRate ? item.quantity * partServicePrice.price * item.mgmtRate * partServicePrice.priceRate : 0)
                                    });
                                return item;
                            }),
                            details: details.map(item => {
                                let quantity = 0;
                                const accessory = res.data.accessoryPrices.find(v => v.partId === item.usedPartId);
                                const tmpQuantity = item.usedQty > accessory.maxQty ? accessory.maxQty : item.usedQty;
                                if(Number.isInteger(tmpQuantity / accessory.minPackSize))
                                    quantity = tmpQuantity;
                                else quantity = (Math.ceil(tmpQuantity / accessory.minPackSize) * accessory.minPackSize) > accessory.maxQty
                                    ? accessory.maxQty : Math.ceil(tmpQuantity / accessory.minPackSize) * accessory.minPackSize;
                                if(accessory)
                                    return Object.assign({}, item, {
                                        price: accessory.price * accessory.priceRate,
                                        materialFee: quantity * accessory.price * accessory.priceRate,
                                        maxQty: accessory.maxQty,
                                        minPackSize: accessory.minPackSize,
                                        quantity
                                    });
                                return item;
                            }),
                            loading: false,
                            hasOperat: true
                        });
                    else
                        this.setState(({
                            loading: false
                        }));
                });
        }
        this.setState({
            data: Object.assign({}, this.state.data, {
                [name]: value
            }),
            hasOperat: true
        });
    }
    
    onSubmitAdjust = () => {
        const {data} = this.state;
        const isValid = adjustValidator(data);
        const subThis = this;
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        if(data.status === subClaimApplyStatus.审核通过)
            confirm({
                title: this.props.intl.formatMessage({
                    id: 'approvePanel.message.claimObject',
                    defaultMessage: '请选择索赔对象'
                }),
                cancelText: this.props.intl.formatMessage({
                    id: 'approvePanel.message.kd',
                    defaultMessage: 'KD工厂'
                }),
                okText: this.props.intl.formatMessage({
                    id: 'approvePanel.message.chery',
                    defaultMessage: 'CHERY'
                }),
                onOk() {
                    subThis.onAdjustApproveAndClaim();
                },
                onCancel() {
                    subThis.onAdjust(data);
                },
            });
        else subThis.onAdjust(data);
    }
    onAdjustApproveAndClaim = () => {
        const {claimMaterialDetails, data} = this.state;
        const claimMaterialDetail = claimMaterialDetails.find(v => v.isCaused === true);
        if(claimMaterialDetail.isLocal)
            return msg.warn(this.props.intl.formatMessage({
                id: 'newPanel.message.err1',
                defaultMessage: '主损件'
            }) + claimMaterialDetail.usedPartCode + this.props.intl.formatMessage({
                id: 'newPanel.message.err2',
                defaultMessage: '为地产件不允许提报给CHERY'
            }));
        this.setState({loading: true});
        this.props.onSubmitAdjustAndClaimApply(data).then(res => {
            if(res.ok) {
                window.open(`${url}${res.data}/update`);
                this.props.successReturn();
            }
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onAdjust = data => {
        this.setState({loading: true});
        this.props.onSubmitAdjust(data).then(res => {
            if(res.success)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    render() {
        const {formatMessage} = this.props.intl;
        const {data, details, loading, claimWorkItemDetails, claimMaterialDetails,
            claimAthDetails, claimHistories, claimApprovedHis} = this.state;
        const validateApproveComment = !data.approveComment && this.state.validate ? 'error' : null;
        const validateApprovedResult = !data.status && this.state.validate ? 'error' : null;
        
        const claimAthDetailTuPhoto = claimAthDetails.find(v => v.type === claimAthType.图片资料 && v.fileType === fileType.图片) || {};
        const claimAthDetailTuFile = claimAthDetails.find(v => v.type === claimAthType.图片资料 && v.fileType === fileType.文件) || {};
        const claimAthDetailFaPhoto = claimAthDetails.find(v => v.type === claimAthType.发票扫描图片 && v.fileType === fileType.图片) || {};
        const claimAthDetailFaFile = claimAthDetails.find(v => v.type === claimAthType.发票扫描图片 && v.fileType === fileType.文件) || {};
        const submitable = !hasPermissions(PERMISSION.approve, this.props.permissions);
        const columnMaterials = [
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode',
                render: (text, r) => (<Popover content={r.productCategoryCode} title={formatMessage({
                    id: 'workItemDetailPanel.partProductCategoryCodes',
                    defaultMessage: '车型'
                })}>
                    {text}
                </Popover>)
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                render: text => text ? formatMessage({
                    id: 'approvePanel.materialTablePanel.isCausedYes',
                    defaultMessage: '是'
                }) : formatMessage({
                    id: 'approvePanel.materialTablePanel.isCausedNo',
                    defaultMessage: '否'
                })
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.isLocal',
                    defaultMessage: '是否地产件'
                }),
                dataIndex: 'isLocal',
                render: text => text ? formatMessage({
                    id: 'approvePanel.materialTablePanel.isLocalYes',
                    defaultMessage: '是'
                }) : formatMessage({
                    id: 'approvePanel.materialTablePanel.isLocalNo',
                    defaultMessage: '否'
                })
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.usedPartDealCategory',
                    defaultMessage: '旧件处理政策'
                }),
                dataIndex: 'usedPartDealCategory',
                render: text => conventEnumValueToString(claimUsedPartDealCategory, text)
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity'
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.mgmtRate',
                    defaultMessage: '管理费率'
                }),
                dataIndex: 'mgmtRate',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'materialTablePanel.mgmtFee',
                    defaultMessage: '管理费'
                }),
                dataIndex: 'mgmtFee',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.materialFee',
                    defaultMessage: '材料费合计'
                }),
                dataIndex: 'materialFee',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'approvePanel.materialTablePanel.totalFee',
                    defaultMessage: '费用合计'
                }),
                dataIndex: 'totalFee',
                render: text => formatAmount(text)
            }
        ];
        const columnWorkItems = [
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.usedPartCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'usedPartCode',
                render: (text, r) => (<Popover content={r.partProductCategoryCodes} title={formatMessage({
                    id: 'workItemDetailPanel.partProductCategoryCodes',
                    defaultMessage: '车型'
                })}>
                    {text}
                </Popover>)
            }, {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.workItemCode',
                    defaultMessage: '维修项目编号'
                }),
                dataIndex: 'workItemCode'
            },
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.workItemName',
                    defaultMessage: '维修项目名称'
                }),
                dataIndex: 'workItemName'
            },
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode'
            },
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.laborHour',
                    defaultMessage: '工时'
                }),
                dataIndex: 'laborHour'
            },
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.laborPrice',
                    defaultMessage: '工时单价'
                }),
                dataIndex: 'laborPrice',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'approvePanel.workItemDetailPanel.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark'
            }
        ];
        const colums = [{
            title: formatMessage({
                id: 'approvePanel.usedPartCode',
                defaultMessage: '旧件编号'
            }),
            dataIndex: 'usedPartCode'
        },
        {
            title: formatMessage({
                id: 'approvePanel.usedPartName',
                defaultMessage: '旧件名称'
            }),
            dataIndex: 'usedPartName'
        },
        {
            title: formatMessage({
                id: 'approvePanel.usedPartDealCategory',
                defaultMessage: '旧件处理政策'
            }),
            dataIndex: 'usedPartDealCategory',
            render: text => conventEnumValueToString(claimUsedPartDealCategory, text)
        },
        {
            title: formatMessage({
                id: 'approvePanel.unit',
                defaultMessage: '计量单位'
            }),
            dataIndex: 'unit'
        },
        {
            title: formatMessage({
                id: 'approvePanel.usedQty',
                defaultMessage: '索赔用量'
            }),
            dataIndex: 'usedQty'
        },
        {
            title: formatMessage({
                id: 'approvePanel.quantity',
                defaultMessage: '计价数量'
            }),
            dataIndex: 'quantity'
        },
        {
            title: formatMessage({
                id: 'approvePanel.price',
                defaultMessage: '单价'
            }),
            dataIndex: 'price',
            render: text => formatAmount(text)
        },
        {
            title: formatMessage({
                id: 'approvePanel.materialFee',
                defaultMessage: '材料费合计'
            }),
            dataIndex: 'materialFee',
            render: text => formatAmount(text)
        }];
        const columResults = [{
            title: formatMessage({
                id: 'approvePanel.approverName',
                defaultMessage: '审核人'
            }),
            dataIndex: 'approverName'
        },
        {
            title: formatMessage({
                id: 'approvePanel.approveComment',
                defaultMessage: '审核意见'
            }),
            dataIndex: 'approveComment'
        },
        {
            title: formatMessage({
                id: 'approvePanel.approveTime',
                defaultMessage: '审核时间'
            }),
            dataIndex: 'approveTime',
            render: text => formatDateTime(text, DATETIME_FORMAT)
        }];
        return (
            <div className="form-standard">
                <Spin spinning={this.state.loading}>
                    {this.state.warrantyPolicyMessage && <Alert
                        className={styles.alertMessage}
                        message={formatMessage({
                            id: 'approvePanel.alert.warrantyPolicies',
                            defaultMessage: '整车索赔政策校验'
                        })}
                        description={this.state.warrantyPolicyMessage}
                        type="warning"
                        showIcon />}
                    <Anchor className={styles.toc_affix}
                        showInkInFixed={true}>
                        <Link href={`${location.hash}#components-anchor-common`} title={this.props.intl.formatMessage({
                            id: 'approvePanel.anchor.common',
                            defaultMessage: '基本信息'
                        })} />
                        <Link href={`${location.hash}#components-anchor-vehicleInfo`} title={this.props.intl.formatMessage({
                            id: 'approvePanel.anchor.vehicleInfo',
                            defaultMessage: '车辆信息'
                        })} />
                        <Link href={`${location.hash}#components-anchor-material`} title={this.props.intl.formatMessage({
                            id: 'approvePanel.anchor.material',
                            defaultMessage: '材料信息'
                        })} />
                        {!data.isOtherArea && <Link href={`${location.hash}#components-anchor-claimHistory`} title={this.props.intl.formatMessage({
                            id: 'newPanel.anchor.claimHistory',
                            defaultMessage: '历史索赔'
                        })} />}
                    </Anchor>
                    <Collapse className={styles.collapseMarginTop}>
                        <Panel id="components-anchor-common" header={<Row><Col {...PANEL_CARD_COL_SPAN}><Form>
                            <Row>
                                <Col className={styles.multiLabel} {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.code',
                                        defaultMessage: '预授权单号'
                                    })}
                                    {...FORM_OPTIONS.item} >
                                        {data.code}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'approvePanel.operation.brandId',
                                            defaultMessage: '品牌'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {data.brandCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.vin',
                                            defaultMessage: 'VIN'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {data.vin}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.operation.repairType',
                                            defaultMessage: '索赔类型'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(repairType, data.repairType)}
                                    </FormItem>
                                </Col>
                                <Col className={styles.multiLabel} {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.repairCode',
                                        defaultMessage: '维修单号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.repairCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.checkDate',
                                        defaultMessage: '检查日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.checkDate ? formatDateTime(data.checkDate, DATE_FORMAT)
                                            : <div onClick={this.onClickStopPropagation}><WrappedDatePicker
                                                name="checkDate"
                                                value={data.checkDate}
                                                onChange={this.onChangeCheckDate}/></div>}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.mileage',
                                        defaultMessage: '行驶里程'
                                    })} {...FORM_OPTIONS.item} >
                                        {data.mileage}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.saleDate',
                                        defaultMessage: '实销日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.saleDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.shipDate',
                                        defaultMessage: '发车日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.shipDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.productionDate',
                                        defaultMessage: '生产日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.productionDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form></Col></Row>} key="1">
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.isOtherArea',
                                            defaultMessage: '是否跨区域索赔'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {data.isOtherArea ? 'Yes' : 'No'}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.supplierName',
                                            defaultMessage: '供应商名称'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {data.supplierName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.repairDate',
                                            defaultMessage: '维修日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.repairDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                {
                                    data.repairType === repairType.备件索赔 &&
                                    <Col {...FORM_OPTIONS.col}>
                                        <FormItem
                                            label={this.props.intl.formatMessage({
                                                id: 'approvePanel.form.partPurchasedDate',
                                                defaultMessage: '自费购件时间'
                                            })}
                                            {...FORM_OPTIONS.item}>
                                            {formatDateTime(data.partPurchasedDate, DATE_FORMAT)}
                                        </FormItem>
                                    </Col>
                                }
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.artisan',
                                        defaultMessage: '技术分析员'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.artisan}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.createName',
                                            defaultMessage: '填报人'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {data.creatorName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.createTime',
                                            defaultMessage: '申请日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.createTime, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Panel>
                        <Panel id="components-anchor-vehicleInfo" header={<Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.productCategoryCode',
                                        defaultMessage: '车型编号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.productCategoryCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.customerSoldType',
                                        defaultMessage: '客户性质'
                                    })} {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(customerType, data.customerSoldType)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.country',
                                        defaultMessage: '国家'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.country}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>} key="2">
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.wholesaleDealerCode',
                                        defaultMessage: '总代'
                                    })} {...FORM_OPTIONS.item}>
                                        {`(${data.wholesaleDealerCode})${data.wholesaleDealerName}`}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.currency',
                                        defaultMessage: '币种'
                                    })} {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(currency, data.currency)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.engineCode',
                                        defaultMessage: '发动机号'
                                    })} {...FORM_OPTIONS.item}
                                    validateStatus={!data.engineCode && this.state.validate ? 'error' : null}
                                    required>
                                        <TextInput
                                            name="engineCode"
                                            value={data.engineCode}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.transmissionSn',
                                        defaultMessage: '变速箱号'
                                    })} {...FORM_OPTIONS.item}
                                    validateStatus={!data.transmissionSn && this.state.validate ? 'error' : null}
                                    required>
                                        <TextInput
                                            name="transmissionSn"
                                            value={data.transmissionSn}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.salesDealerCode',
                                        defaultMessage: '经销商编号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.salesDealerCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.salesDealerName',
                                        defaultMessage: '经销商名称'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.salesDealerName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.productCategoryName',
                                        defaultMessage: '车型名称'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.productCategoryName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.annoucementNumber',
                                        defaultMessage: '公告号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.annoucementNumber}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.isKD',
                                        defaultMessage: 'CBU/KD索赔'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.isKD === true && formatMessage({
                                            id: 'approvePanel.operation.kd',
                                            defaultMessage: 'KD'
                                        })}
                                        {data.isKD === false && formatMessage({
                                            id: 'approvePanel.operation.cbu',
                                            defaultMessage: 'CBU'
                                        })}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.customerName',
                                        defaultMessage: '用户姓名'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.customerName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.cellPhoneNumber',
                                        defaultMessage: '用户电话'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.cellPhoneNumber}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.companyName',
                                        defaultMessage: '用户公司'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.companyName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.address',
                                        defaultMessage: '用户地址'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.address}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.email',
                                        defaultMessage: '用户Email'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.email}
                                    </FormItem>
                                </Col>
                            </Row>
                        </Panel>
                    </Collapse>
                    <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']}>
                        <Panel id="components-anchor-material" header={<div>{formatMessage({
                            id: 'approvePanel.operation.claimMaterialDetails',
                            defaultMessage: '材料清单'
                        })}<Divider type="vertical" />{this.props.intl.formatMessage({
                            id: 'approvePanel.form.supplierCode',
                            defaultMessage: '供应商编号'
                        })}{': '}{data.supplierCode}<Divider type="vertical" />{this.props.intl.formatMessage({
                            id: 'approvePanel.form.faultType',
                            defaultMessage: '故障类型'
                        })}{': '}{data.faultType}</div>} key="1">
                            <Table
                                className="white-space-nowrap"
                                columns={columnMaterials}
                                rowKey="usedPartId"
                                pagination={false}
                                dataSource={claimMaterialDetails}
                                {...TABLE} />
                            <Row>
                                <Col>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.faultItem',
                                            defaultMessage: '故障代码'
                                        })}
                                        {...FORM_ROW_OPTIONS.item}>
                                        <span className="value-font">({data.faultItemCode}) {data.faultItemName}</span>
                                    </FormItem>
                                </Col></Row>
                            <Row>
                                <Col>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.form.faultMode',
                                            defaultMessage: '故障原因'
                                        })}
                                        {...FORM_ROW_OPTIONS.item}>
                                        <span className="value-font">({data.faultModeCode}) {data.faultModeName}</span>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.faultDescription',
                                        defaultMessage: '详细故障描述'
                                    })} {...FORM_ROW_OPTIONS.item}>
                                        {data.faultDescription}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/* <Row>
                                <Col className={styles.multiLabel}>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.checkResult',
                                        defaultMessage: '检查分析结果'
                                    })} {...FORM_ROW_OPTIONS.item}>
                                        {data.checkResult}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col className={styles.multiLabel}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'approvePanel.operation.artisanResult',
                                        defaultMessage: '技术判断意见'
                                    })} {...FORM_ROW_OPTIONS.item}>
                                        {data.artisanResult}
                                    </FormItem>
                                </Col>
                            </Row> */}
                        </Panel>
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.attachment',
                            defaultMessage: '附件清单'
                        })} key="6">
                            {claimAthDetails && claimAthDetails.length > 0
                                ? <div>
                                    {
                                        (claimAthDetailTuPhoto || claimAthDetailTuFile) &&
                                        <DescriptionList title={formatMessage({
                                            id: 'approvePanel.card.attachmentTu',
                                            defaultMessage: '图片资料附件'
                                        })} size="large">
                                            {(claimAthDetailTuPhoto.attachments && claimAthDetailTuPhoto.attachments.length > 0) &&
                                            <div><ImageUpload fileList={claimAthDetailTuPhoto.attachments} isUpload={false}/>
                                                <Divider /></div>}
                                            {(claimAthDetailTuFile.attachments && claimAthDetailTuFile.attachments.length > 0) &&
                                                claimAthDetailTuFile.attachments.map(item => (<Description key={item.fileId}>
                                                    <a icon="download" download
                                                        href={`${FILES_API.files}/${item.fileId}`} size="small">{item.fileName}</a></Description>))}
                                        </DescriptionList>
                                    }
                                    <Divider className={styles.divider}/>
                                    {
                                        data.repairType === repairType.备件索赔 && (claimAthDetailFaPhoto || claimAthDetailFaFile) &&
                                        <DescriptionList title={formatMessage({
                                            id: 'approvePanel.card.attachmentFa',
                                            defaultMessage: '发票扫描图片附件'
                                        })} size="large">
                                            {(claimAthDetailFaPhoto.attachments && claimAthDetailFaPhoto.attachments.length > 0) &&
                                            <div><ImageUpload fileList={claimAthDetailTuPhoto.attachments} isUpload={false}/>
                                                <Divider /></div>}
                                            {(claimAthDetailFaFile.attachments && claimAthDetailFaFile.attachments.length > 0) &&
                                                claimAthDetailFaFile.attachments.map(item => (<Description key={item.fileId}>
                                                    <a icon="download" download
                                                        href={`${FILES_API.files}/${item.fileId}`} size="small">{item.fileName}</a></Description>))}
                                        </DescriptionList>
                                    }
                                </div>
                                : formatMessage({
                                    id: 'approvePanel.content.noAttachment',
                                    defaultMessage: '暂无附件'
                                })}
                        </Panel>
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.claimWorkItemDetails',
                            defaultMessage: '项目清单'
                        })} key="2">
                            <Table
                                className="white-space-nowrap"
                                columns={columnWorkItems}
                                rowKey="id"
                                pagination={false}
                                dataSource={claimWorkItemDetails}
                                {...TABLE} />
                        </Panel>
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.details',
                            defaultMessage: '辅料清单'
                        })} key="3">
                            <Table
                                className="white-space-nowrap"
                                columns={colums}
                                rowKey="usedPartId"
                                pagination={false}
                                dataSource={details}
                                {...TABLE} />
                        </Panel>
                        {
                            !data.isOtherArea && <Panel id="components-anchor-claimHistory" header={formatMessage({
                                id: 'approvePanel.operation.claimHistory',
                                defaultMessage: '历史索赔信息'
                            })} key="4">
                                <ClaimHistoryPanel data={claimHistories} />
                            </Panel>
                        }
                        <Panel header={formatMessage({
                            id: 'approvePanel.operation.claimApprovedHis',
                            defaultMessage: '历史审核信息'
                        })} key="5">
                            <Table
                                className="white-space-nowrap"
                                columns={columResults}
                                rowKey="id"
                                pagination={false}
                                dataSource={claimApprovedHis}
                                {...TABLE} />
                        </Panel>
                    </Collapse>
                    <Card title={formatMessage({
                        id: 'approvePanel.card.feeInfo',
                        defaultMessage: '索赔费用'
                    })}>
                        <Row>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'approvePanel.form.laborFee',
                                        defaultMessage: '工时费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(data.laborFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'newPanel.form.materialFee',
                                        defaultMessage: '材料费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(data.materialFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'approvePanel.form.assistantFee',
                                        defaultMessage: '辅料费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(data.assistantFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'approvePanel.form.mgmtFee',
                                        defaultMessage: '管理费'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(data.mgmtFee)}
                                </FormItem>
                            </Col>
                            <Col {...FORM_OPTIONS.col}>
                                <FormItem
                                    label={this.props.intl.formatMessage({
                                        id: 'approvePanel.form.totalFee',
                                        defaultMessage: '费用合计'
                                    })}
                                    {...FORM_OPTIONS.item}>
                                    {formatAmount(data.totalFee)}
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                    <Card
                        title={formatMessage({
                            id: 'approvePanel.operation.approve',
                            defaultMessage: '审核区域'
                        })}>
                        <Form>
                            <Row className="row-margin">
                                {this.props.page === 'adjust' && <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'approvePanel.operation.approvedResult',
                                            defaultMessage: '审核结果'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        validateStatus={validateApprovedResult}
                                        required>
                                        <WrappedSelect
                                            name="status"
                                            value={data.status}
                                            options={subClaimApplyStatusSaleList}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>}
                                <Col>
                                    <FormItem label={formatMessage({
                                        id: 'approvePanel.operation.approveComment',
                                        defaultMessage: '审核意见'
                                    })} {...FORM_ROW_OPTIONS.item}
                                    validateStatus={validateApproveComment}
                                    required>
                                        <TextInput
                                            type="textarea"
                                            name="approveComment"
                                            value={data.approveComment}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    {this.props.page === 'approve' && <Card className={styles.optionBtn}>
                        <Button
                            onClick={this.onSubmitReject}
                            disabled={!submitable}
                            loading={loading}>
                            {formatMessage({
                                id: 'approvePanel.operation.onSubmitReject',
                                defaultMessage: '驳回'
                            })}
                        </Button>
                        <Button
                            onClick={this.onSubmitRefuse}
                            disabled={!submitable}
                            loading={loading}>
                            {formatMessage({
                                id: 'approvePanel.operation.onSubmitRefuse',
                                defaultMessage: '拒赔'
                            })}
                        </Button>
                        <Button
                            type="primary"
                            onClick={this.onSubmitPass}
                            disabled={!submitable}
                            loading={loading}>
                            {formatMessage({
                                id: 'approvePanel.operation.onSubmitPass',
                                defaultMessage: '审核通过'
                            })}
                        </Button>
                    </Card>}
                    {this.props.page === 'adjust' && <Card className={styles.optionBtn}>
                        <Button
                            type="primary"
                            onClick={this.onSubmitAdjust}
                            loading={loading}>
                            {formatMessage({
                                id: 'approvePanel.operation.onSubmit',
                                defaultMessage: '确认'
                            })}
                        </Button>
                    </Card>}
                </Spin>
                <div className="page-toolbar">
                    <Return
                        disabled={this.state.loading}
                        onConfirm={this.onClickOkOnPopconfirm}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

ApprovePanel.propTypes = {
    initEnum: PropTypes.object.isRequired,
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onApproveAndClaimApply: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmitAdjust: PropTypes.func.isRequired,
    onSubmitAdjustAndClaimApply: PropTypes.func.isRequired,
    onSubmitPass: PropTypes.func.isRequired,
    onSubmitReject: PropTypes.func.isRequired,
    enterprise: PropTypes.object,
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    page: PropTypes.string,
};

import {connect} from 'react-redux';
import {
    tableSearch,
    onApprove,
    onReject,
    onRefuse,
    onApproveAndClaimApplyData,
    onAdjust,
    onAdjustAndClaimApplyData
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {createSelector} from 'reselect';
const getinitEnumData = createSelector(
    state => state.getIn(['page', 'domainData', 'initData']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? initData.brands.map(item => ({
            text: `${'('}${item.code}${')'}${item.name}`,
            value: item.id
        })) : [];
        return {
            brands
        };
    }
);
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getEnterprise = selectorFactory(['page', 'domainData', 'initData', 'enterprise']);
const mapStateToProps = (state, props) => ({
    isDealerUser: state.getIn((['page', 'domainData', 'initData', 'isDealerUser'])),
    initEnum: getinitEnumData(state),
    enterprise: getEnterprise(state),
    permissions: getPermissions(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    onSubmitPass: data => dispatch(onApprove(data)),
    onSubmitReject: data => dispatch(onReject(data)),
    onSubmitRefuse: data => dispatch(onRefuse(data)),
    onApproveAndClaimApply: data => dispatch(onApproveAndClaimApplyData(data)),
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    onSubmitAdjust: data => dispatch(onAdjust(data)),
    onSubmitAdjustAndClaimApply: data => dispatch(onAdjustAndClaimApplyData(data)),
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(ApprovePanel));
